<template>
    <div class="heading-records">
        <!--   借阅记录搜索和新增    -->
        <el-row class="heading-records-search-and-new" >
            <!--    查询借阅记录功能  -->
            <el-col :span="16">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="借阅记录编号" value="record_id"></el-option>
                        <el-option label="借阅图书IBSN" value="record_book_ibsn"></el-option>
                        <el-option label="借阅图书的名称" value="record_book_title"></el-option>
                        <el-option label="借阅图书的作者" value="record_book_author"></el-option>
                        <el-option label="借阅图书的出版社" value="record_book_publisher"></el-option>
                        <el-option label="借阅图书的库存地址" value="record_book_address"></el-option>
                        <el-option label="借阅时间" value="record_create_time"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="searchRecord"></el-button>
                </el-input>
            </el-col>
            <!--    修改列表中为未还图书  -->
            <el-col :span="4">
                <el-button type="primary" @click="changeDisplay" style="margin-left: 10px">{{this.display?"显示所有借阅记录":"显示未归还借阅记录"}}</el-button>
            </el-col>
        </el-row>
        <!--    借阅记录信息列表  -->
        <el-table :data="recordsData" style="width: 100%;margin-top: 10px">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="借阅记录编号">
                            <span>{{ props.row.record_id }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书IBSN">
                            <span>{{ props.row.record_book_ibsn }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书名称">
                            <span>{{ props.row.record_book_title }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书作者">
                            <span>{{ props.row.record_book_author }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书出版社">
                            <span>{{ props.row.record_book_publisher }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书单价">
                            <span>{{ props.row.record_book_price }}</span>
                        </el-form-item>
                        <el-form-item label="所借阅图书的库存地址">
                            <span>{{ props.row.record_book_address }}</span>
                        </el-form-item>
                        <el-form-item label="借阅记录创建时间">
                            <span>{{ props.row.record_create_time }}</span>
                        </el-form-item>
                        <el-form-item label="借阅到期时间">
                            <span>{{ props.row.record_expire_time}}</span>
                        </el-form-item>
                        <el-form-item label="是否归还">
                            <span>{{ props.row.record_return?'已归还':'未归还'}}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="借阅记录编号" prop="record_id"></el-table-column>
            <el-table-column label="借阅图书名" prop="record_book_title"></el-table-column>
            <el-table-column label="借阅作者" prop="record_book_author"></el-table-column>
            <el-table-column label="出版社" prop="record_book_publisher"></el-table-column>
            <el-table-column label="所借阅图书的库存地址" prop="record_book_address"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="props">
                    <!--    延长借阅  -->
                    <el-button size="mini" type="primary" @click="cardEdit(props.$index, props.row)">续借</el-button>
                    <!--    归还  -->
                    <el-button size="mini" type="success" @click="cardDelete(props.$index, props.row)">还书</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    借阅记录列表切换  -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="defaultPage"
                :page-sizes="pages"
                :page-size="pages[pagesIndex]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "HeadingRecords",
        data(){
            return {
                // 借阅记录列表
                recordsData: [],
                // 页面显示:
                display:false,
                // 查询借阅记录
                input:'',
                select:'',
                // 借阅记录信息列表分页显示
                defaultPage: 1,
                totalNumber:5,
                pages:[5,10,15,20],
                pagesIndex: 1,
            };
        },
        mounted() {
            this.getRecordsList()
        },
        methods:{
            // 页面加载时获取数据库中借阅记录列表
            getRecordsList(){
                console.log('发送借阅记录信息获取请求！')
                // 使用查询获取自己的借阅记录列表
                this.$axios.get('/records/search',{
                    params:{
                        role:this.$store.state.user.user_role,
                        type:'record_is_delete',
                        input:0,
                        id:this.$store.state.card.library_card_id
                    }
                }).then(res=>{
                    console.log(res.data)
                    if(res.data.code === 200){
                        this.recordsData = res.data.msg
                        this.totalNumber = res.data.msg.length
                        // console.log(res.data);
                    }else{
                        this.$message({
                            message: '服务器开小差了,请刷新页面重试~~~',
                            type: 'warning'
                        })
                    }
                })
            },
            // 搜索借阅记录信息
            searchRecord(){
                this.$axios.get('/records/search',{
                    params: {
                        role:this.$store.state.user.user_role,
                        type:this.select,
                        input:this.input,
                        id:this.$store.state.card.library_card_id,
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.$message({
                            message: '查询借阅记录信息成功！',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '请确认借阅记录信息完整性与正确性后重试！',
                            type: 'warning'
                        })
                    }
                    this.recordsData = res.data.msg
                    // console.log(res.data)
                })
            },
            // 修改页面显示
            changeDisplay(){
                this.display = !this.display
                if(this.display){
                    this.$axios.get('/records/search',{
                        params: {
                            role:this.$store.state.user.user_role,
                            type:'record_return',
                            input:0,
                            id:this.$store.state.card.library_card_id
                        }
                    }).then(res=>{
                        if(res.data.code === 200){
                            this.$message({
                                message: '修改页面显示成功~~~',
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message: '服务器故障,请联系管理员处理',
                                type: 'warning'
                            })
                        }
                        this.recordsData = res.data.msg
                    })
                }else{
                    this.getRecordsList()
                }
            },
            // 续借
            cardEdit(index, row) {
                let flag = true
                if(row.record_return === 1){
                    this.$message({
                        message: '你已经还书了,请再去借吧~~~',
                        type: 'warning'
                    })
                    flag = false
                }
                if(flag && this.$store.state.card.student_is_arrears){
                    this.$message({
                        message: '你有书逾期了,快去查看一下吧~~~',
                        type: 'warning'
                    })
                    flag =false
                }
                const time = row.record_expire_time-Date.now()
                console.log(time);
                if(flag && time>604800000){
                    this.$message({
                        message: '亲,你的书还有很长时间到期呢~~~',
                        type: 'warning'
                    })
                    flag =false
                }
                if(flag){
                    const newTime = parseInt(row.record_expire_time) + 30*24*60*60*1000
                    this.$axios.post('/records/update',{
                        role:this.$store.state.user.user_role,
                        id:row.record_id,
                        type:'record_expire_time',
                        input:newTime
                    }).then(res => {
                        if(res.data.code === 200){
                            this.$message({
                                message: '续借成功,你可以在读一个月啦~~~',
                                type: 'success'
                            })
                            this.getRecordsList()
                        }else{
                            this.$message({
                                message: '服务器开小差去了,请重试~~~',
                                type: 'warning'
                            })
                        }
                    })
                }
            },
            // 还书
            cardDelete(index, row) {
                // console.log(index, row);
                const time = row.record_expire_time - Date.now()
                console.log(time);
                if(time<0){
                    this.$message({
                        message: '抱歉,您借阅的图书已逾期,请去服务台缴纳罚金~~~',
                        type: 'warning'
                    })
                }else{
                    let result = true
                    if(row.record_return === 1){
                        this.$message({
                            message: '你已经还过此书了,想看再来借书呀~~~',
                            type: 'warning'
                        })
                        result = false
                    }
                    if(result){
                        // 修改借阅记录
                        console.log('修改借阅记录')
                        this.$axios.post('/records/update',{
                            role:this.$store.state.user.user_role,
                            id:row.record_id,
                            type:'record_return',
                            input:1
                        }).then(res => {
                            if(res.data.code !== 200){
                                this.$message({
                                    message: '服务器开小差去了,请重试~~~',
                                    type: 'warning'
                                })
                                result = false
                            }
                        })
                    }
                    if(result){
                        // 修改图书库存
                        console.log('修改图书信息')
                        let number = parseInt(row.book_now_number) + 1
                        this.$axios.post('/books/update',{
                            role:this.$store.state.user.user_role,
                            ibsn:row.record_book_ibsn,
                            type:'book_now_number',
                            input: 'book_now_number+1'
                        }).then(res => {
                            console.log(res.data)
                            if(res.data.code === 200){
                                this.$message({
                                    message: '还书成功,希望它陪你走过一段快乐的时光~~~',
                                    type: 'success'
                                })
                                // this.getRecordsList()
                                this.changeDisplay()
                            }else{
                                this.$message({
                                    message: '服务器开小差去了,请重试~~~',
                                    type: 'warning'
                                })
                            }
                        })
                    }
                }
            },
            // 切换每页显示的数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 切换页面
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .heading-records{
        margin: 10px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>